<template>
  <div class="center">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">{{ title }}</span>
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" @click="showMessageBox"  ref="warnScrollBoard" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import { notification } from 'ant-design-vue';
export default defineComponent({
  props: {
    table: {
      type: Object,// 引用类型的话,默认值要为函数返回值的形式!!! 1.String 2.Number 3.Boolean 4.Array 5.Object 6.Date 7.Function 8.Symbol
      require: true
    },
  },
  setup(props) {

    const {table} = toRefs(props)
    const title = table.value.title
    const width = table.value.width

    const config = reactive({
      header: table.value.header,
      data: table.value.data,
      rowNum: 5, //表格行数
      headerHeight: 35,
      headerBGC: '#0f1325', //表头
      oddRowBGC: '#0f1325', //奇数行
      evenRowBGC: '#171c33', //偶数行
      index: true,
      columnWidth: [50],
      align: [ 'center' ]
    })

    /**
      message.config({
        duration: 2,// 	默认自动关闭延时，单位秒
        maxCount: 3,// 最大显示数, 超过限制时，最早的消息会被自动关闭
      });
      //message.info("请尽快联系"+ config.row[1]+"管理员!");
     **/

    notification.config({
      duration: 2,	//默认 4.5 秒后自动关闭，配置为 null 则不自动关闭
      maxCount: 1,	//最大显示数, 超过限制时，最早的消息会被自动关闭
    });
    let showMessageBox =(config) =>{
      if( config && config.row && config.row[1] ){
        notification.open({
          message: config.row[1]+'告警',
          description:  "请尽快联系"+ config.row[1]+"管理员!",
          placement: 'bottomRight',//	弹出位置，可选 topLeft topRight bottomLeft bottomRight
        });
      }
    }
    //使用toRefs 包裹需要双向绑定的数据即可。
    return { title, width, config,  showMessageBox }
  }
})
</script>

<style lang="scss" scoped>
$box-width: 350px;
$box-height: 230px;
.center {
  padding: 15px 10px 10px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 20px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 350px;
      height: 170px;
    }
  }
}
</style>
